<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header">
      <view class="back-button" @click="goBack">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
        <text>返回</text>
      </view>
    </view>

    <!-- 课程信息卡片 -->
    <view class="course-card">
      <view class="course-title">高级Web开发技术</view>
      <view class="course-stats">
        <view class="rating">
          <text class="star">★</text>
          <text class="rating-value">4.8</text>
          <text class="rating-count">(54评价)</text>
        </view>
        <text class="divider">|</text>
        <view class="learners">
          <text class="learner-count">46</text>
          <text>人已学习</text>
        </view>
        <text class="divider">|</text>
        <view class="duration">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
          </svg>
          <text>36小时·48讲</text>
        </view>
      </view>

      <!-- 教授信息 -->
      <view class="professor-info" @click="showProfessorDetails">
        <view class="avatar">
          <image src="https://imagecgr.oss-cn-beijing.aliyuncs.com/teacher.jpg" mode="aspectFill"></image>
        </view>
        <view class="professor-details">
          <text class="professor-name">李明教授</text>
          <text class="professor-title">web智能研究中心主任</text>
        </view>
      </view>

      <!-- 继续学习按钮 -->
      <view class="action-buttons">
        <button class="continue-button" @click="navigateToLearn(lastLectureId)">继续学习</button>
      </view>

      <!-- 学习进度 -->
      <view class="progress-section">
        <view class="progress-header">
          <text class="progress-label">学习进度</text>
          <text class="progress-value">11%</text>
        </view>
        <view class="progress-bar">
          <view class="progress-indicator" :style="{ width: '11%' }"></view>
        </view>
      </view>
    </view>

    <!-- 标签页 -->
    <view class="tabs">
      <view v-for="(tab, index) in tabs" :key="index" class="tab" :class="{ active: activeTab === tab.value }"
        @click="activeTab = tab.value">
        {{ tab.label }}
      </view>
    </view>

    <!-- 标签页内容 -->
    <view class="tab-content">
      <!-- 章节标签页 -->
      <view v-if="activeTab === 'chapters'" class="chapters-content">
        <view v-for="chapter in chapters" :key="chapter.number" class="chapter-section">
          <view class="chapter-header" @click="toggleChapter(chapter.number)">
            <view class="chapter-title-section">
              <view class="chapter-number">{{ chapter.number }}</view>
              <text class="chapter-title">{{ chapter.title }}</text>
              <text class="lecture-count">{{ chapter.lectures.length }}讲</text>
            </view>
            <view class="chapter-toggle">
              <svg v-if="chapter.expanded" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="18 15 12 9 6 15"></polyline>
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="6 9 12 15 18 9"></polyline>
              </svg>
            </view>
          </view>

          <view v-if="chapter.expanded" class="lectures-list">
            <view v-for="lecture in chapter.lectures" :key="lecture.id" class="lecture-item">
              <view class="lecture-info">
                <view v-if="lecture.completed" class="lecture-status completed">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                  </svg>
                </view>
                <view v-else class="lecture-status">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"></circle>
                  </svg>
                </view>
                <view class="lecture-details">
                  <text class="lecture-title">{{ lecture.title }}</text>
                  <text class="lecture-duration">{{ lecture.duration }}</text>
                </view>
              </view>
              <button class="lecture-button" :class="{ 'completed-button': lecture.completed }"
                @click="navigateToLearn(lecture.id)">
                {{ lecture.completed ? '重新学习' : '开始学习' }}
              </button>
            </view>
          </view>
        </view>
      </view>

      <!-- 简介标签页 -->
      <view v-if="activeTab === 'intro'" class="intro-content">
        <view class="intro-section">
          <text class="section-title">课程简介</text>
          <view class="intro-text">
            <text class="paragraph">
              本课程旨在为学生提供web开发领域的基础知识和实践应用能力。从web开发的基本概念、历史发展到最新的技术趋势，
              全面介绍核心内容。
            </text>
            <text class="paragraph">
              课程内容涵盖机器学习基础、深度学习入门、自然语言处理、计算机视觉等多个方向，通过理论讲解与实践案例相结合的方式，
              帮助学生建立完整的知识体系。
            </text>
            <text class="paragraph">
              适合对象：计算机科学专业学生、对人工智能感兴趣的工程师、希望了解AI技术的各行业从业者。
            </text>
            <text class="sub-title">你将学到：</text>
            <view class="list-item">
              <text class="bullet">•</text>
              <text>web开发的基本概念与发展历程</text>
            </view>
            <view class="list-item">
              <text class="bullet">•</text>
              <text>机器学习的核心算法与应用场景</text>
            </view>
            <view class="list-item">
              <text class="bullet">•</text>
              <text>深度学习的基础模型与实现方法</text>
            </view>
            <view class="list-item">
              <text class="bullet">•</text>
              <text>web开发在各行业的实际应用案例</text>
            </view>
            <view class="list-item">
              <text class="bullet">•</text>
              <text>搭建自己的web网站</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 资源标签页 -->
      <view v-if="activeTab === 'resources'" class="resources-content">
        <view class="resource-section">
          <text class="section-title">课程资源</text>
          <view class="resources-list">
            <view v-for="(resource, index) in resources" :key="index" class="resource-item">
              <view class="resource-info">
                <view class="resource-icon" :class="resource.type.toLowerCase()">
                  {{ resource.type }}
                </view>
                <view class="resource-details">
                  <text class="resource-title">{{ resource.title }}</text>
                  <text class="resource-description">{{ resource.description }}</text>
                </view>
              </view>
              <view class="resource-actions">
                <text class="resource-size">{{ resource.size }}</text>
                <button class="download-button">下载</button>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 活动标签页 -->
      <view v-if="activeTab === 'activities'" class="activities-content">
        <view class="activity-section">
          <text class="section-title">课程活动</text>
          <view class="activities-list">
            <view v-for="(activity, index) in activities" :key="index" class="activity-item">
              <view class="activity-info">
                <text class="activity-title">{{ activity.title }}</text>
                <text class="activity-date">{{ activity.date }}</text>
              </view>
              <view class="activity-actions">
                <text class="activity-status" :class="activity.status">
                  {{ getStatusText(activity.status) }}
                </text>
                <button v-if="activity.status !== 'completed'" class="participate-button">
                  参与
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 教授详情弹窗 -->
    <uni-popup ref="professorPopup" type="center">
      <view class="professor-popup">
        <view class="professor-popup-header">
          <text class="professor-popup-title">教授详情</text>
          <view class="close-button" @click="closeProfessorDetails">×</view>
        </view>
        <view class="professor-popup-content">
          <view class="professor-popup-avatar">
            <image src="https://imagecgr.oss-cn-beijing.aliyuncs.com/teacher.jpg" mode="aspectFill"></image>
          </view>
          <text class="professor-popup-name">李明教授</text>
          <text class="professor-popup-title">web开发研究中心主任</text>
          <view class="professor-popup-bio">
            <text class="bio-paragraph">李明教授拥有超过15年的web开发研究经验，曾在多家知名科技公司担任技术顾问。</text>
            <text class="bio-paragraph">研究方向：深度学习、自然语言处理、计算机视觉</text>
            <text class="bio-paragraph">发表论文50余篇，拥有专利20余项</text>
            <text class="bio-paragraph">曾获国家科学技术进步奖二等奖</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 最后观看的课程ID
const lastLectureId = 3;

// 标签页状态
const tabs = [
  { label: '章节', value: 'chapters' },
  { label: '简介', value: 'intro' },
  { label: '资源', value: 'resources' },
  { label: '活动', value: 'activities' }
];
const activeTab = ref('chapters');

// 章节数据
const chapters = ref([
  {
    number: 1,
    title: 'Web开发概述',
    expanded: true,
    lectures: [
      { id: 1, title: '什么是web开发', duration: '15:30', completed: true },
      { id: 2, title: 'web开发历史与发展', duration: '20:45', completed: true },
      { id: 3, title: 'web应用场景', duration: '18:20', completed: false },
      { id: 4, title: '课程项目介绍', duration: '12:10', completed: false }
    ]
  },
  {
    number: 2,
    title: '前端框架Vue.js基础',
    expanded: false,
    lectures: [
      { id: 5, title: '学习概述', duration: '22:15', completed: false },
      { id: 6, title: '监督学习', duration: '25:40', completed: false },
      { id: 7, title: '无监督学习', duration: '18:30', completed: false },
      { id: 8, title: '强化学习', duration: '20:10', completed: false },
      { id: 9, title: '评估模型', duration: '15:45', completed: false }
    ]
  },
  {
    number: 3,
    title: '后端开发与API设计',
    expanded: false,
    lectures: [
      { id: 10, title: 'html巩固', duration: '24:30', completed: false },
      { id: 11, title: 'css巩固', duration: '28:15', completed: false },
      { id: 12, title: 'js加强', duration: '26:40', completed: false },
      { id: 13, title: 'Transformer架构', duration: '30:20', completed: false }
    ]
  },
  {
    number: 4,
    title: '数据库设计与集成',
    expanded: false,
    lectures: [
      { id: 10, title: 'html巩固', duration: '24:30', completed: false },
      { id: 11, title: 'css巩固', duration: '28:15', completed: false },
      { id: 12, title: 'js加强', duration: '26:40', completed: false },
      { id: 13, title: 'Transformer架构', duration: '30:20', completed: false }
    ]
  },
  {
    number: 5,
    title: '前后端集成与部署',
    expanded: false,
    lectures: [
      { id: 10, title: 'html巩固', duration: '24:30', completed: false },
      { id: 11, title: 'css巩固', duration: '28:15', completed: false },
      { id: 12, title: 'js加强', duration: '26:40', completed: false },
      { id: 13, title: 'Transformer架构', duration: '30:20', completed: false }
    ]
  },
  {
    number: 6,
    title: '综合项目实践',
    expanded: false,
    lectures: [
      { id: 10, title: 'html巩固', duration: '24:30', completed: false },
      { id: 11, title: 'css巩固', duration: '28:15', completed: false },
      { id: 12, title: 'js加强', duration: '26:40', completed: false },
      { id: 13, title: 'Transformer架构', duration: '30:20', completed: false }
    ]
  },
  {
    number: 7,
    title: 'Web安全与性能优化',
    expanded: false,
    lectures: [
      { id: 10, title: 'html巩固', duration: '24:30', completed: false },
      { id: 11, title: 'css巩固', duration: '28:15', completed: false },
      { id: 12, title: 'js加强', duration: '26:40', completed: false },
      { id: 13, title: 'Transformer架构', duration: '30:20', completed: false }
    ]
  },
  {
    number: 8,
    title: '移动端适配与PWA',
    expanded: false,
    lectures: [
      { id: 10, title: 'html巩固', duration: '24:30', completed: false },
      { id: 11, title: 'css巩固', duration: '28:15', completed: false },
      { id: 12, title: 'js加强', duration: '26:40', completed: false },
      { id: 13, title: 'Transformer架构', duration: '30:20', completed: false }
    ]
  }
]);

// 资源数据
const resources = [
  { title: '课程PPT', description: '包含所有章节的幻灯片', type: 'PDF', size: '24MB' },
  { title: '代码示例', description: '课程中演示的所有代码', type: 'ZIP', size: '18MB' },
  { title: '推荐阅读材料', description: '扩展阅读书籍与论文列表', type: 'PDF', size: '2MB' },
  { title: '数据集', description: '实验所需的示例数据', type: 'ZIP', size: '156MB' }
];

// 活动数据
const activities = [
  { title: '期末项目展示', date: '2025年1月15日', status: 'upcoming' },
  { title: 'web应用案例分享会', date: '2024年12月20日', status: 'upcoming' },
  { title: '机器学习算法讨论', date: '2024年11月30日', status: 'active' },
  { title: '课程导学直播', date: '2024年10月15日', status: 'completed' }
];

// 教授弹窗引用
const professorPopup = ref(null);

// 方法
function goBack() {
  uni.navigateBack();
}

function toggleChapter(number) {
  const chapter = chapters.value.find(c => c.number === number);
  if (chapter) {
    chapter.expanded = !chapter.expanded;
  }
}

function navigateToLearn(lectureId) {
  uni.navigateTo({
    url:'/pages/indexTostudy/indexTostudy'
  });
}

function showProfessorDetails() {
  professorPopup.value.open();
}

function closeProfessorDetails() {
  professorPopup.value.close();
}

function getStatusText(status) {
  switch (status) {
    case 'upcoming': return '即将开始';
    case 'active': return '进行中';
    case 'completed': return '已结束';
    default: return '';
  }
}

// 生命周期
onLoad(() => {
  // 初始化代码
});
</script>

<style>
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

/* 头部 */
.header {
  background-color: #2196f3;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
}

.back-button {
  display: flex;
  align-items: center;
  color: white;
}

.back-button svg {
  margin-right: 10rpx;
  stroke: white;
}

/* 课程卡片 */
.course-card {
  background-color: white;
  margin: 30rpx;
  padding: 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.course-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.course-stats {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.rating {
  display: flex;
  align-items: center;
}

.star {
  color: #ffb800;
  margin-right: 4rpx;
}

.rating-value {
  font-weight: bold;
  margin-right: 4rpx;
}

.divider {
  margin: 0 20rpx;
  color: #ddd;
}

.learner-count {
  font-weight: bold;
  margin-right: 4rpx;
}

.duration {
  display: flex;
  align-items: center;
}

.duration svg {
  margin-right: 6rpx;
  stroke: #666;
}

/* 教授信息 */
.professor-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
}

.avatar image {
  width: 100%;
  height: 100%;
}

.professor-name {
  font-weight: bold;
  font-size: 28rpx;
}

.professor-title {
  font-size: 24rpx;
  color: #666;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  margin-bottom: 30rpx;
}

.continue-button {
  flex: 1;
  background-color: #2196f3;
  color: white;
  padding: 20rpx;
  border-radius: 10rpx;
  text-align: center;
  font-size: 30rpx;
  margin-right: 20rpx;
}

.share-button {
  width: 80rpx;
  height: 80rpx;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-button svg {
  stroke: #666;
}

/* 进度部分 */
.progress-section {
  margin-top: 20rpx;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.progress-label {
  font-size: 24rpx;
  color: #666;
}

.progress-value {
  font-size: 24rpx;
  color: #2196f3;
  font-weight: bold;
}

.progress-bar {
  height: 8rpx;
  background-color: #f0f0f0;
  border-radius: 4rpx;
  overflow: hidden;
}

.progress-indicator {
  height: 100%;
  background-color: #2196f3;
  border-radius: 4rpx;
}

/* 标签页 */
.tabs {
  display: flex;
  background-color: white;
  margin: 0 30rpx 30rpx;
  border-radius: 10rpx;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab.active {
  color: #2196f3;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 4rpx;
  background-color: #2196f3;
}

/* 标签页内容 */
.tab-content {
  margin: 0 30rpx;
}

/* 章节标签页 */
.chapter-section {
  background-color: white;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.chapter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.chapter-title-section {
  display: flex;
  align-items: center;
}

.chapter-number {
  width: 50rpx;
  height: 50rpx;
  background-color: #e3f2fd;
  color: #2196f3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  margin-right: 20rpx;
}

.chapter-title {
  font-weight: bold;
  margin-right: 20rpx;
}

.lecture-count {
  font-size: 24rpx;
  color: #666;
}

.chapter-toggle svg {
  stroke: #999;
}

.lectures-list {
  padding: 0 30rpx;
}

.lecture-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.lecture-item:last-child {
  border-bottom: none;
}

.lecture-info {
  display: flex;
  align-items: center;
}

.lecture-status {
  margin-right: 20rpx;
}

.lecture-status svg {
  stroke: #2196f3;
}

.lecture-status.completed svg {
  stroke: #4caf50;
  fill: none;
}

.lecture-title {
  font-size: 28rpx;
  margin-right: 10rpx;
}

.lecture-duration {
  font-size: 24rpx;
  color: #666;
}

.lecture-button {
  background-color: #2196f3;
  color: white;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  min-width: 120rpx;
  text-align: center;
  display: inline-block;
  margin-right: 20rpx;
}

.completed-button {
  background-color: white;
  color: #2196f3;
  border: 1px solid #2196f3;
  min-width: 120rpx;
  text-align: center;
}

/* 简介标签页 */
.intro-section {
  background-color: white;
  border-radius: 10rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.intro-text {
  color: #333;
}

.paragraph {
  display: block;
  margin-bottom: 20rpx;
  line-height: 1.6;
  font-size: 28rpx;
}

.sub-title {
  display: block;
  font-weight: bold;
  margin: 30rpx 0 20rpx;
  font-size: 28rpx;
}

.list-item {
  display: flex;
  margin-bottom: 10rpx;
  font-size: 28rpx;
}

.bullet {
  margin-right: 10rpx;
}

/* 资源标签页 */
.resource-section {
  background-color: white;
  border-radius: 10rpx;
  padding: 30rpx;
}

.resources-list {
  margin-top: 20rpx;
}

.resource-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.resource-info {
  display: flex;
  align-items: center;
}

.resource-icon {
  width: 60rpx;
  height: 60rpx;
  background-color: #e3f2fd;
  color: #2196f3;
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  margin-right: 20rpx;
}

.resource-title {
  font-weight: bold;
  font-size: 28rpx;
}

.resource-description {
  font-size: 24rpx;
  color: #666;
}

.resource-actions {
  display: flex;
  align-items: center;
}

.resource-size {
  font-size: 24rpx;
  color: #666;
  margin-right: 20rpx;
}

.download-button {
  border: 1px solid #ddd;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
}

/* 活动标签页 */
.activity-section {
  background-color: white;
  border-radius: 10rpx;
  padding: 30rpx;
}

.activities-list {
  margin-top: 20rpx;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.activity-title {
  font-weight: bold;
  font-size: 28rpx;
}

.activity-date {
  font-size: 24rpx;
  color: #666;
}

.activity-actions {
  display: flex;
  align-items: center;
}

.activity-status {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  margin-right: 20rpx;
}

.activity-status.upcoming {
  background-color: #fff8e1;
  color: #ff9800;
}

.activity-status.active {
  background-color: #e8f5e9;
  color: #4caf50;
}

.activity-status.completed {
  background-color: #f5f5f5;
  color: #9e9e9e;
}

.participate-button {
  border: 1px solid #2196f3;
  color: #2196f3;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  background-color: white;
}

/* 教授弹窗 */
.professor-popup {
  background-color: white;
  border-radius: 20rpx;
  width: 600rpx;
  padding: 30rpx;
}

.professor-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.professor-popup-title {
  font-size: 32rpx;
  font-weight: bold;
}

.close-button {
  font-size: 40rpx;
  color: #999;
}

.professor-popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.professor-popup-avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.professor-popup-avatar image {
  width: 100%;
  height: 100%;
}

.professor-popup-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.professor-popup-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.professor-popup-bio {
  width: 100%;
}

.bio-paragraph {
  display: block;
  font-size: 26rpx;
  line-height: 1.6;
  margin-bottom: 16rpx;
  color: #333;
}
</style>